﻿///////////////////////////////////////////////////
// Title  : Model Popup
// Author : Gordon.Chen
// Date   : 10/13/2009
// Var    : 0.96 Beta
///////////////////////////

////////////////////////////////////////////////////////////////////////////////////
// model_popup class 
//  public function :
//
//  + model_popup.Popup();
//  + model_popup.Closedown();
//  + model_popup.TimerSwitch(pEvent);
//
//  Des:
//  
////////////////////////////////////////////////////////////////////////////////////
function ModelPopup()
{
    this.DEBUGMODE = false;                                     // Debug Mode
    this.USESCROLL = true;                                      // Debug Mode for if use ScrollTop/ScrollLeft
    
    this.m_divID = "PopupWindow";                               // Popup Window ID
    this.m_timer_popup;                                         // Timer of popup
    this.m_timer_closedown;                                     // Timer of closedown
    this.m_timer_over_time = 1000;                              // Time-Lapse on mouseover
    this.m_timer_out_time = 100;                               // Time-Lapse on mouseout
    this.uid= -1;
    
    this.m_element;                                             // Event Element
    this.m_event;                                               // Event
    this.m_element_top;                                         // Event Element Top
    this.m_element_left;                                        // Event Element Left
    this.m_element_height;                                      // Event Element Height
    this.m_element_width;                                       // Event Element Width
    this.m_element_scrollTop;                                   // Event Element ScrollTop
    this.m_element_scrollLeft;                                  // Event Element ScrollLeft
    
    this.m_popup_height = 420;                                  // Popup window Height //415
    this.m_popup_width = 355;                                   // Popup window Width  //350
    this.m_popup_top;                                           // Popup window Top
    this.m_popup_left;                                          // Popup window Left
    
    //this.m_popup_point_width = 20;                            // Popup Point Width
    //this.m_popup_point_space = 20;                            // Popup Point Space

    //this.m_popup_space = 20;                                  // Popup Round Space
    
    // Animation
    this.m_popup_direct_L;                                      // Direct of Action
    this.m_popup_direct_U; 
    
    this.m_ani_timer_popup;                                     // Animation timer for popup
    this.m_ani_timer_close;                                     // Animation timer for closing
    this.m_ani_width = 0;                                       // Animation Temp Infomation
    this.m_ani_height = 0;
    this.m_ani_top = 0;
    this.m_ani_left = 0;
    
    this.m_ani_times = 0;
    
    this.m_keyword = "";
    
    ///////////////////////////////////////////////////////////
    // Browser Compatible 
    //////////
    this.document = document.compatMode=="CSS1Compat"? document.documentElement: document.body;
    
    
    //--------------------------------------------//
    // + Pop Up 
    //--------------------------------------------//
    this.Popup = function(e,argu){
    
        this.m_keyword = e.innerHTML;

        if(document.getElementById(this.m_divID) == null){
            this.m_element = e; // Get Element
            this.m_event = window.navigator.userAgent.indexOf("MSIE")>0 ? window.event:argu;
            this.getElementSize();
            this.setPopupWindow();
            this.TimerSwitch("EOver");
        }
    }
    
    //--------------------------------------------//
    // + Pop Up  For OnClick
    //--------------------------------------------//
    this.Popup_Onclick = function(e,argu){
    
        this.m_keyword = e.innerHTML;
        var str = e.toString();        
        var sub = str.indexOf('=');       
        this.uid = str.substring(sub+1);
//        var index1 = index.indexOf('=');
//        alert('index'+index1);
//        var uid =  e.toString().subString(index);
//        alert(uid);
//        this.uid = e.toString().substring(index);
//        alert(uid);
        
        if(document.getElementById(this.m_divID) == null){
            this.m_element = e; // Get Element
            this.m_event = window.navigator.userAgent.indexOf("MSIE")>0 ? window.event:argu;
            this.getElementSize();
            this.setPopupWindow();
            this.show();
        }
        
       clearTimeout(this.m_timer_popup);
        
    }
    
    //---------------------------------------------//
    // + Close Down
    //---------------------------------------------//
    this.Closedown = function(){
        
        this.TimerSwitch("POut");
        //if(this.m_timer_mouseout == undefined)
        //    this.m_timer_mouseout = setTimeout("model_popup.killwindow()",this.m_timer_out_time);// Kill on time
    }
    
    //---------------------------------------------//
    // + Timer Switch
    //---------------------------------------------//
    this.TimerSwitch = function(pEvent){
    
        // if popup , close mouseout switch ; else close mouseover switch
        if (document.getElementById(this.m_divID) == null){
            if (this.m_timer_closedown != undefined){
                clearTimeout(this.m_timer_closedown);
            }
        }
        else{
            if (this.m_timer_popup != undefined) {
                clearTimeout(this.m_timer_popup);
            }
        }
        
        // if Element MouseOver
        if (pEvent == "EOver")
            if(document.getElementById(this.m_divID) == null){
                this.m_timer_popup = setTimeout("model_popup.show()",this.m_timer_over_time);
            }
            else{
                if (this.m_timer_closedown != undefined){
                    clearTimeout(this.m_timer_closedown);
                }
            }
        
        // if Element MouseOut         
        if (pEvent == "EOut"){ 
            if(document.getElementById(this.m_divID) == null){
                //if (this.m_timer_popup != undefined){
                    clearTimeout(this.m_timer_popup);
                //}
            }
            else{
                this.m_timer_closedown = setTimeout("model_popup.killwindow()",this.m_timer_out_time);
            }
        }
            
        // if Popup MouseOver    
        if (pEvent == "POver"){
            if(document.getElementById(this.m_divID) != null){
                if (this.m_timer_closedown != undefined){
                    clearTimeout(this.m_timer_closedown);
                    
                }
            }
        }
        
        // if Popup MouseOut
        if (pEvent == "POut"){
            if(document.getElementById(this.m_divID) != null){
                this.m_timer_closedown = setTimeout("model_popup.killwindow()",this.m_timer_out_time);
            }
        }
    }
    
    //---------------------------------------------//
    // Get Element Infomation in windows
    //---------------------------------------------//
    
    //----------------------------//
    // - GetElementSize Infomation
    //----------------------------//
    this.getElementSize = function(){
        if (this.m_element != 'undefined'){
            this.m_element_top =  this.getElementTop(this.m_element) - this.document.scrollTop;                // Get Element Top               
            this.m_element_left = this.getElementLeft(this.m_element) - this.document.scrollLeft;              // Get Element Left
            this.m_element_height = this.getElementHeight(this.m_element);          // Get Element Height
            this.m_element_width = this.getElementWidth(this.m_element);            // Get Element Width
            this.m_element_scrollTop = this.getElementScrollTop(this.m_element);    // Get Element ScrollTop
            this.m_element_scrollLeft = this.getElementScrollLeft(this.m_element);  // Get Element ScrollLeft
        }                                   
    }
    
    // Get Element Top
    this.getElementTop = function(e){
        if ( this.USESCROLL ){
            var offset = e.offsetTop;
            if (e.offsetParent != null ){
                offset += this.getElementTop(e.offsetParent);
            }
            return offset;
        }
        else{
            return this.m_event.clientY - this.m_event.offsetY;
        }
    }
    
    // Get Element Left
    this.getElementLeft = function(e){
        if ( this.USESCROLL ){
            var offset = e.offsetLeft;
            if (e.offsetParent != null){
                offset += this.getElementLeft(e.offsetParent);
            }
            return offset;
        }
        else{
            return this.m_event.clientX - this.m_event.offsetX;
        }
    }
    
    // Get Element Width
    this.getElementWidth = function(e){
        return e.offsetWidth;
    }
    
    // Get Element Height
    this.getElementHeight = function(e){
        return e.offsetHeight;
    }
    
    // Get Element ScrollTop
    this.getElementScrollTop = function(e){
        //if( document.documentElement.scrollTop == undefined ){
        //    var scroll = e.scrollTop;
        //    if(e.offsetParent != null){
        //        scroll += this.getElementScrollTop(e.offsetParent);
        //    }
        //    return scroll;
        //}
        //else{
            return this.document.scrollTop;
        //}
    }
    
    // Get Element ScrollLeft
    this.getElementScrollLeft = function(e){
        //if( document.documentElement.scrollLeft == undefined ){
        //    var scroll = e.scrollLeft;
        //    if(e.offsetParent != null){
        //        scroll += this.getElementScrollLeft(e.offsetParent);
        //    }
        //    return scroll;
        //}
        //else{
            return this.document.scrollLeft;
        //}
    }

        
    //---------------------------------------------//
    // - Set Popup window
    //---------------------------------------------//
    this.setPopupWindow = function(){
        iBrowserHeight = this.document.clientHeight;
        iBrowserWidth = this.document.clientWidth;


        // Area 1 & 2 - SET TOP
        if ( this.m_element_top <= iBrowserHeight/2 ){
            this.m_popup_top = this.m_element_top  + this.m_element_scrollTop;// + this.m_popup_space;
            this.m_popup_direct_L = "Down";
        }
        // Area 3 & 4 - SET TOP
        else{
            this.m_popup_top = this.m_element_top - this.m_popup_height + this.m_element_height + this.m_element_scrollTop;//+ this.m_popup_space;
            this.m_popup_direct_L = "Up";
        }
        
        // Area 2 & 3 - SET LEFT
        if ( this.m_element_left <= iBrowserWidth/2){
            this.m_popup_left = this.m_element_left + this.m_element_width + this.m_element_scrollLeft;//+ this.m_popup_space;
            this.m_popup_direct_U = "Right";
        }
        // Area 1 & 4 - SET LEFT
        else{
            this.m_popup_left = this.m_element_left - this.m_popup_width  + this.m_element_scrollLeft;//+ this.m_popup_space;
            this.m_popup_direct_U = "Left";
        }
        
        // Init Animation
        this.m_ani_width = 0;
        this.m_ani_height = 0;
        this.m_ani_top = 0;
        this.m_ani_left = 0;
        
        this.m_ani_times = 0;
        
        clearInterval(this.m_ani_timer_popup);
        clearInterval(this.m_ani_timer_close);
        
    }
    
    //---------------------------------------------//
    // - Show Popup Window
    //---------------------------------------------//
    this.show = function(){
        var strShow = "";

        strShow += "<div onmouseout='model_popup.Closedown()' onmouseover=model_popup.TimerSwitch('POver') id='"+this.m_divID+"' style='";
        strShow += "position:absolute;";
        strShow += "width:0px;";
        strShow += "height:0px;";
        strShow += "top:0px;";
        strShow += "left:px; overflow:hidden '>";
strShow += "<div class='popup_menu'>";
strShow += "            <div id='head'>";
strShow += "                <ul>";
strShow += "                    <li id='close' class='botton' onclick='model_popup.killwindow()'></li>";
strShow += "                </ul>";
strShow += "            </div>";
strShow += "            <div id='content'>";
strShow += "            <div id='popupcontent'>";
strShow += "                <div id='UIPageChangeWeb' style=' padding:100px 100px 100px 100px;'>";
strShow += "                  <img src='/support/alpha/images/popup/popup_load.gif'/>     ";
strShow += "                </div>";
strShow += "            </div>";
strShow += "        </div>";
strShow += "        </div>";
       strShow += "</div>";
        document.body.innerHTML += strShow;
        GetUserData(this.uid);
        
//        DoSearch(this.m_keyword,"UIPageChangeWeb","UIPageChangeImg");
        

        // Cartoon
        this.m_ani_width = 0;
        this.m_ani_height = 0;
        if ( this.m_popup_direct_L=="Up" ){
            this.m_ani_top = this.m_popup_top + this.m_popup_height; 
        }
        else{
            this.m_ani_top = this.m_popup_top;
            document.getElementById(this.m_divID).style.top = this.m_popup_top + "px";
        }
        
        if (this.m_popup_direct_U == "Right"){
            this.m_ani_left = this.m_popup_left;
            document.getElementById(this.m_divID).style.left = this.m_popup_left + "px";
        }
        else{
            this.m_ani_left = this.m_popup_left + this.m_popup_width;
        }
        
        clearInterval(this.m_ani_timer_close);
        clearInterval(this.m_ani_timer_popup);
        this.m_ani_timer_popup = setInterval("model_popup.draw()",10);
        
        //this.m_timer_mouseover = undefined;     // reset timer
    }
    this.draw = function(){
        if ( this.m_ani_times != 10 ){
            this.m_ani_width += this.m_popup_width/10;
            this.m_ani_height += this.m_popup_height/10;
            document.getElementById(this.m_divID).style.width = this.m_ani_width + "px";
            document.getElementById(this.m_divID).style.height = this.m_ani_height + "px";

            if ( this.m_popup_direct_L=="Up"){
                this.m_ani_top -= this.m_popup_height/10;
                document.getElementById(this.m_divID).style.top = this.m_ani_top + "px";
            }
            else{
                
            }
            if (this.m_popup_direct_U == "Left" ){
                this.m_ani_left -= this.m_popup_width/10;
                document.getElementById(this.m_divID).style.left = this.m_ani_left + "px";
            }
            this.m_ani_times ++;
        }
        else{
            //show all
            if (document.getElementById(this.m_divID)!=null){
                document.getElementById(this.m_divID).style.width = this.m_popup_width + "px";
                document.getElementById(this.m_divID).style.height = this.m_popup_height + "px";
                document.getElementById(this.m_divID).style.top = this.m_popup_top + "px";
                document.getElementById(this.m_divID).style.left = this.m_popup_left + "px";
                this.fixscreen();  // Fix Screen
            }
            
            this.m_ani_times = 0;
            clearInterval(this.m_ani_timer_popup);
            clearInterval(this.m_ani_timer_close);
        }
    }
    
    //---------------------------------------------//
    // - Kill Popup Window
    //---------------------------------------------//
    this.killwindow = function(){
        
        this.m_ani_width = this.m_popup_width;
        this.m_ani_height = this.m_popup_height;
        this.m_ani_top = this.m_popup_top;
        this.m_ani_left = this.m_popup_left;
        
        clearInterval(this.m_ani_timer_popup);
        clearInterval(this.m_ani_timer_close);
        this.m_ani_timer_close = setInterval("model_popup.drawdown()",10);
    }
    
    this.drawdown = function(){
        if ( this.m_ani_times != 10 ){
            this.m_ani_width -= this.m_ani_width/10;
            this.m_ani_height -= this.m_ani_height/10;
            
            if (document.getElementById(this.m_divID)!=null){
                document.getElementById(this.m_divID).style.width = this.m_ani_width + "px";
                document.getElementById(this.m_divID).style.height = this.m_ani_height + "px";
            }

            if ( this.m_popup_direct_L=="Up"){
                this.m_ani_top += this.m_ani_height/10;
                if (document.getElementById(this.m_divID)!=null){
                    document.getElementById(this.m_divID).style.top = this.m_ani_top + "px";
                }
            }
            if (this.m_popup_direct_U == "Left" ){
                this.m_ani_left += this.m_ani_width/10;
                if (document.getElementById(this.m_divID)!=null){
                    document.getElementById(this.m_divID).style.left = this.m_ani_left + "px";
                }
            }
            this.m_ani_times ++;
        }
        else{
            // kill all
            if (document.getElementById(this.m_divID)!=null){
                var node = document.getElementById(this.m_divID);
                var parentnode = node.parentNode;
                parentnode.removeChild(node);
                
                //this.m_timer_mouseout = undefined;      // reset timer
            }
            
            this.m_ani_times = 0;
            clearInterval(this.m_ani_timer_close);
            clearInterval(this.m_ani_timer_popup);
        }
    }
    
    //---------------------------------------------//
    // - Fix Scroll Screen
    //---------------------------------------------//
    this.fixscreen = function(){
        if (this.m_popup_direct_L == "Up" ){
            if( this.m_element_top - this.m_popup_height < 0){
                this.document.scrollTop += (this.m_element_top - this.m_popup_height);
            }
        }
        else{
            if( this.m_element_top + this.m_element_height + this.m_popup_height > this.document.clientHeight){
                this.document.scrollTop -= (this.document.clientHeight - (this.m_element_top + this.m_element_height + this.m_popup_height));
            }
        }
        if (this.m_popup_direct_U == "Left" ){
            if( this.m_element_left - this.m_popup_width < 0){
                this.document.scrollLeft += (this.m_element_left - this.m_popup_width);
            }
        }
        else{
            if( this.m_element_left + this.m_element_width + this.m_popup_width > this.document.clientWidth){
                this.document.scrollLeft -= (this.document.clientWidth - (this.m_element_left + this.m_element_width + this.m_popup_left));
            }
        }
    }
    
    //---------------------------------------------//
    // - Set Css File
    //---------------------------------------------//
    //this.setCss = function(){
    //    strSet = "<link id='popupcss' type='text/css' rel='stylesheet' href='popup.css' />";
    //    document.styleSheet += strSet;
    //}
    
    //---------------------------------------------//
    // - Debug Functions
    //---------------------------------------------//
    this.debug = function(){
        if (this.DEBUGMODE == true){
            alert(
            "this.m_element:"+this.m_element.id +"\n" +
            "this.m_element_top:"+this.m_element_top+"\n" +
            "this.m_element_left:"+this.m_element_left+"\n" +
            "this.m_element_height:"+this.m_element_height+"\n" +
            "this.m_element_width:"+this.m_element_width+"\n" +
            "this.m_popup_top:"+this.m_popup_top+"\n" +
            "this.m_popup_left:"+this.m_popup_left+"\n" +
            "this.m_popup_width:"+this.m_popup_width+"\n" +
            "this.m_popup_height:"+this.m_popup_height+"\n" +
            "this.m_popup_direct_L:"+this.m_popup_direct_L +"\n" +
            "this.m_popup_direct_U:"+this.m_popup_direct_U +"\n" +
            "document.documentElement.clientHeight:"+document.documentElement.clientHeight +"\n" +
            "document.documentElement.clientHeight:"+document.documentElement.clientHeight +"\n" +
            "this.m_element_scrollTop:"+document.documentElement.scrollTop  +"\n" +
            "this.m_element_scrollLeft:"+this.m_element_scrollLeft +"\n" +
            "--------------------------------------------------------\n" +
            "this.m_ani_times:"+ this.m_ani_times +"\n" +
            "this.event.clientY:"+ this.m_event.clientY +"\n" +
            "this.event.offsetY:"+ this.m_event.offsetY +"\n" +
            "--------------------------------------------------------\n" 
            );
        }
    }
    
    //-------------------------------------------------//
    // + Change Page
    //-------------------------------------------------//
    this.change = function(tab) {
        if (tab=="img"){
            document.getElementById('UIPageChangeWeb').style.display = "none";
            document.getElementById('UIPageChangeImg').style.display = "block";
        }
        if (tab=="web"){
            document.getElementById('UIPageChangeImg').style.display = "none";
            document.getElementById('UIPageChangeWeb').style.display = "block";
        }
    }  
}

var model_popup = new ModelPopup();

function GetUserData(uid)
{
    
  var aurl = "/Pages/alpha/Ajax/PopupAjax.aspx?uid="+uid;
  var myAjax=new Ajax(aurl,
  {
     method:'get',
     onComplete:function()
     {
      var html=this.response.text;
      _$("content").innerHTML=html;
      }
   }
   );
   myAjax.request();
  
  
}  

function GetMouseOverUserID(node)
{
    

}